<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">    
    <h:body>
        <ui:composition template="templates/template.xhtml">
            <ui:define name="title">Détails produit - Administration ShopEasy</ui:define>
            <ui:define name="content">
                <section class="wrapper style2">
                    <div class="container">
                        <div id="content">
                            <h:form>
                                <p:fieldset legend="Détails du produit" style="margin-bottom:20px;">

                                    <p:growl id="messages" />

                                    <h:panelGrid columns="2" cellpadding="5" style="margin-bottom:20px">
                                        <p:outputLabel for="libelle" value="Libellé:" style="margin-right: 80px"/>
                                        <p:inplace>
                                            <p:inputText id="libelle" value="#{detailsProduit.produit.libelle}" required="true" />
                                        </p:inplace>

                                        <p:outputLabel for="prix" value="Prix:" />
                                        <p:inplace>
                                            <p:inputText id="prix" value="#{detailsProduit.produit.prix}" required="true">
                                                <f:validateDoubleRange minimum="0.01" />
                                            </p:inputText>
                                        </p:inplace>

                                        <p:outputLabel for="typeproduit" value="Unité:" />
                                        <p:inplace>
                                            <p:selectOneMenu id="typeproduit" value="#{detailsProduit.produit.type}" required="true" styleClass="vertical-align" >
                                                <f:selectItem itemLabel="Choisir" />
                                                <f:selectItem itemLabel="prix/kg" itemValue="kg" />
                                                <f:selectItem itemLabel="prix/piece" itemValue="piece" />
                                            </p:selectOneMenu> 
                                        </p:inplace>
                                    </h:panelGrid>

                                    <h4>Rayon:</h4>
                                    <h:panelGrid columns="2" cellpadding="5">
                                        <p:outputLabel for="rayon" value="Rayon:" style="margin-right: 80px;" />
                                        <p:inplace label="#{detailsProduit.produit.rayon.nom}">
                                            <p:selectOneMenu id="rayon" value="#{detailsProduit.idRayonSelectionne}" required="true" styleClass="vertical-align" >
                                                <f:selectItem itemLabel="Choisir" itemValue="#{detailsProduit.produit.rayon.id}" />
                                                <f:selectItems value="#{detailsProduit.rayons}" var="rayon" itemLabel="#{rayon.nom} n°#{rayon.position}" itemValue="#{rayon.id}" />
                                            </p:selectOneMenu> 
                                        </p:inplace>
                                    </h:panelGrid>

                                    <h4>Promotion:</h4>
                                    <h:panelGrid columns="2" cellpadding="5">
                                        <h:outputLabel for="typepromo" value="Type:" style="margin-right: 108px"/>
                                        <p:inplace emptyLabel="null" >
                                            <p:selectOneMenu id="typepromo" value="#{detailsProduit.promotion.type}" style="padding-right: 15px" styleClass="vertical-align" >
                                                <f:selectItem itemLabel="Choisir" itemValue="" />
                                                <f:selectItem itemLabel="%" itemValue="%" />
                                                <f:selectItem itemLabel="€" itemValue="€" />
                                            </p:selectOneMenu>
                                        </p:inplace>

                                        <h:outputLabel for="valeurpromo" value="Valeur:" />
                                        <p:inplace >
                                            <p:inputText id="valeurpromo" value="#{detailsProduit.promotion.valeur}" />
                                        </p:inplace>

                                        <h:outputLabel for="quantitepromo" value="Quantité:" />
                                        <p:inplace >
                                            <p:spinner id="quantitepromo" value="#{detailsProduit.promotion.quantiteNecessaire}" />
                                        </p:inplace>
                                    </h:panelGrid>

                                    <h4>Catégorie:</h4>
                                    <p:panelGrid style="width: 100%">
                                        <p:row>
                                            <p:column>
                                                <h:panelGrid columns="2" cellpadding="5">
                                                    <p:outputLabel for="categorie" value="Catégorie:" style="margin-right: 56px" />
                                                    <p:inplace label="Choisir">
                                                        <p:selectOneMenu id="categorie" value="#{detailsProduit.idCategorieSelectionnee}" effect="fade" style="width: 250px; margin-right: 15px" filter="true" 
                                                                         filterMatchMode="startsWith" panelStyleClass="search-dropdown-icon" styleClass="vertical-align" >
                                                            <p:ajax event="valueChange" update="descriptioncat" />
                                                            <f:selectItem itemLabel="Choisir" itemValue="-1" />
                                                            <f:selectItems value="#{detailsProduit.categories}" var="c" itemLabel="#{c.libelle}" itemValue="#{c.id}" />                                                            
                                                        </p:selectOneMenu>

                                                        <p:commandButton id="btnAjoutCat" icon="ui-icon-plus" actionListener="#{detailsProduit.ajouterCategorie()}" update="catAjoutee" process="@this"/>
                                                    </p:inplace>
                                                </h:panelGrid>

                                                <h:panelGrid columns="2" cellpadding="5">
                                                    <p:outputLabel for="descriptioncat" value="Description:" style="margin-right: 44px"/>
                                                    <p:inputTextarea id="descriptioncat" cols="50" readonly="true" value="#{detailsProduit.categorieSelectionnee.description}"/>
                                                </h:panelGrid>
                                            </p:column>
                                            <p:column>
                                                <p:dataList id="catAjoutee" value="#{detailsProduit.produit.categories}" var="cat" >                                                        
                                                    <f:facet name="header">
                                                        Liste
                                                    </f:facet>
                                                    <p:commandLink process="catAjoutee" update="catAjoutee" title="Supprimer" action="#{detailsProduit.supprimerCategorie(cat)}"
                                                                   styleClass="ui-icon ui-icon-trash" style="float:right;margin:5px 30px 0 10px;" />
                                                    <h:outputText value="#{cat.libelle}" style="display:inline-block"/>
                                                </p:dataList>
                                            </p:column>
                                        </p:row>
                                    </p:panelGrid>

                                    <h4>Photo:</h4>
                                    <h:panelGrid columns="2" cellpadding="5">
                                        <h:outputLabel for="image" value="Photo:" />
                                        <p:inplace id="image" label="Afficher" effect="slide" style="color: blue; text-decoration: underline">
                                            <img style="width: 200px; height: 200px" src="#{detailsProduit.produit.urlPhoto}" />
                                        </p:inplace>
                                    </h:panelGrid>
                                    <p:fileUpload fileUploadListener="#{detailsProduit.modifierImage}" mode="advanced" dragDropSupport="true"
                                                  update="messages" sizeLimit="200000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" style="margin:20px 0 20px 0"/> 

                                    <p:commandButton value="Sauvegarder" update="@form" actionListener="#{detailsProduit.sauvegarderModifications()}"/>
                                </p:fieldset>
                            </h:form>
                        </div>
                    </div>
                </section>
            </ui:define>
        </ui:composition>
    </h:body>
</html>